<template>
  <div class="app-container" style="margin-top: -25px">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
    </el-form>

    <!--    <div id="main">-->
    <!--      这里是要打印的东西-->
    <!--    </div>-->
    <!-- 打印按钮，通过 v-print 调用打印事件 -->
    <!--    <button v-print="printObj">打印</button>-->
    <div ref="tableRef"  id="main" style="width: 100%">
      <div style="width: 100%;text-align: center;font-size: 24px;margin-bottom:15px;">泰康锻造股份有限公司产品出库单</div>
      <!--      <div style="width: 100%;text-align: center;font-size: 20px;margin-bottom:10px;">出库单</div>-->
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="86px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="收货单位" prop="beginTime">
              {{order.companyName}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="采购订单号" prop="beginTime">
              {{rowData.orderId}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="单据编号" prop="beginTime">
              {{rowData.danhao}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="项目名称" prop="beginTime">
              {{order.orderTitle}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="送货日期" prop="beginTime">
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="补料单" prop="beginTime">
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="卸货地址" prop="beginTime">
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="收货联系人" prop="beginTime">
              {{order.cusName}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="送货车号" prop="beginTime">
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table style="width: 100%;border-bottom: 1px solid black" border :span-method="addSpanMethod" v-loading="loading" :data="chukudetailList" @selection-change="handleSelectionChange" row-key="columnId" >
        <el-table-column width="140" label="物料名称" align="center" prop="itemName" />
        <el-table-column width="140"  label="物料编码" align="center" prop="itemCode" />
        <el-table-column width="130"  label="规格型号" align="center" prop="spec" />
        <el-table-column  width="80" label="出库单位" align="center" prop="unit">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.jc_iteminfo_unit" :value="scope.row.unit"/>
          </template>
        </el-table-column>
        <!--        <el-table-column label="供应商" align="center" prop="supplyName" />-->
        <el-table-column  width="80" label="仓库名称" align="center" prop="stockName" />
        <el-table-column  width="80" label="物料类型" align="center" prop="className" />
        <el-table-column width="80"  label="出库数量" align="center" prop="ckNum" />
        <el-table-column width="100"  label="收货人签字" align="center" prop="sign" />
        <el-table-column width="80"  label="备注" align="center" prop="bei" />
      </el-table>
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="86px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="发货人" prop="beginTime">
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="地址" prop="beginTime">
              泰康锻造股份有限公司
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="总数量" prop="beginTime">
              {{zsl}}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

    </div>
    <div class="print-button-container">
      <el-button type="primary" icon="el-icon-printer"  @click="billPrintClick">打印</el-button>
    </div>
    <!-- 添加或修改出库详情对话框 -->
    <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="open" width="1200px" append-to-body>
      <el-form ref="form" style="margin-top: -20px"  :model="form" :rules="rules" label-width="80px">
        <StockinfoSelect ref="stockinfoSelect"></StockinfoSelect>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">选 择</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { listChukudetail, getChukudetail, delChukudetail, addChukudetail,addChuKuStockinfo, updateChukudetail } from "@/api/business/chukudetail";
  import StockinfoSelect from '@/views/business/stockinfo/select';
  import {  getOrderinfo,  } from "@/api/business/orderinfo";

  export default {
    components: {
      StockinfoSelect
    },
    name: "cpChuKuSelect",
    dicts: ['jc_iteminfo_unit'],
    props:{
      rowData:{
        type:Object,
      }
    },
    data() {
      return {
        // printObj: {
        //   id: "main",    // 这里是要打印元素的ID
        //   popTitle: '',  // 打印的标题
        //   extraCss: '',  // 打印可引入外部的一个 css 文件
        //   extraHead: ''  // 打印头部文字
        // },
        zsl:0,
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        itemIds: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 出库详情表格数据
        chukudetailList: [],
        // 表格的高度
        tableHeight: document.documentElement.scrollHeight - 245 + "px",
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          mainId: null,
          ckNum: null,
          cukuDate: null,
          itemName: null,
          itemCode: null,
          supplyId: null,
          supplyName: null,
          stockId: null,
          stockName: null,
          classId: null,
          className: null,
          danhao:null
        },
        // 表单参数
        form: {},
        order:{},
        // 表单校验
        rules: {
        }
      };
    },
    created() {
      //this.getList();
    },
    filters: {
      numFilter (value) {
        // 截取当前数据到小数点后两位
        let realVal = parseFloat(value).toFixed(2)
        return realVal
      }
    },
    methods: {
      // prints () {
      //   this.$print(this.$refs.print)
      //
      // },
      billPrintClick() {
        let newstr = this.$refs.tableRef.innerHTML  // 获取需要打印的内容
        let oldstr = document.body.innerHTML  // 获取别打印页面的内容
        document.body.innerHTML = newstr
        // 获取表格表头，表格内容改变打印内容字体的颜色
        document.getElementsByTagName('thead')[0].style.color = '#000'
        document.getElementsByTagName('tbody')[0].style.color = '#000'
        window.print()
        document.body.innerHTML = oldstr
        window.location.reload()  // 退出刷新页面
        return false
      },
      // 合并列
      addSpanMethod({ row, column, rowIndex, columnIndex }) {
        //从第几列开始合并，columnIndex就等于几（列数的索引值以0开始）
        if (columnIndex === 7) {
          return {
            rowspan: 1000,
            colspan: 1
          };
        }
        if (columnIndex === 8) {
          return {
            rowspan: 1000,
            colspan:1
          };
        }
      },
      /** 查询出库详情列表 */
      getList() {
        this.loading = true;
        listChukudetail(this.queryParams).then(response => {
          this.chukudetailList = response.rows;
          this.zsl = 0
          for(let i=0;i<this.chukudetailList.length;i++){
            this.zsl += this.chukudetailList[i].ckNum
          }
          this.total = response.total;
          this.loading = false;
        });
      },
      getCkSelectList(danhao){
        this.queryParams.danhao=danhao;
        this.getList();
        if(this.rowData.orderId!=null && this.rowData.orderId!=''&& this.rowData.orderId!=undefined){
          getOrderinfo(this.rowData.orderId).then(response => {
            this.order = response.data;
          });
        }
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          mainId: null,
          ckNum: null,
          cukuDate: null,
          itemName: null,
          itemCode: null,
          supplyId: null,
          supplyName: null,
          stockId: null,
          stockName: null,
          classId: null,
          className: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          remark: null
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      /*重置列表*/
      listReset(){
        this.chukudetailList =[];
        this.loading = false;
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length!==1
        this.multiple = !selection.length
      },
      getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '总计';
            return;
          }
          if (index === 1 || index === 2 || index === 3 || index === 4 || index === 5 || index === 6) {
            return '';
          }
          /*  for(var i=0 ;i<data.length;i++){
              data[i].totalPrice =data[i].caigouNum*data[i].unitPrice;
            }*/
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev;
              }
            }, 0);
            sums[index];
          } else {
            sums[index] = '';
          }
        });

        return sums;
      },
      /*
          keepTwoDecimalFull(num) {
            var result = parseFloat(num);
            if (isNaN(result)) {
              alert('传递参数错误，请检查！');
              return false;
            }
            result = Math.round(num * 100) / 100;
            var s_x = result.toString(); //将数字转换为字符串

            var pos_decimal = s_x.indexOf('.'); //小数点的索引值


            // 当整数时，pos_decimal=-1 自动补0
            if (pos_decimal < 0) {
              pos_decimal = s_x.length;
              s_x += '.';
            }

            // 当数字的长度< 小数点索引+2时，补0
            while (s_x.length <= pos_decimal + 2) {
              s_x += '0';
            }
            return s_x;
          },
      */
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "选择物料库存";
        this.itemIds=[];
        if(this.chukudetailList.length>0){
          this.chukudetailList.map((item) => {
            this.itemIds.push(item.itemCode);
          })
        }
        setTimeout(() => {
          this.$refs.stockinfoSelect.getStockinfoList(this.itemIds);
        }, 5);
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const id = row.id || this.ids
        getChukudetail(id).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改出库详情";
        });
      },
      /** 提交按钮 */
      submitForm() {
        const id =this.$refs.stockinfoSelect.ids;
        addChuKuStockinfo(id).then(response => {
          response.data.map((item)=>{
            this.chukudetailList.push(item)
          })
        });
        this.open = false;
      },
      /** 删除按钮操作 */
      handleDelete(index,row) {
        this.chukudetailList.splice(index,1);
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('business/chukudetail/export', {
          ...this.queryParams
        }, `chukudetail_${new Date().getTime()}.xlsx`)
      }
    }
  };
</script>
<style lang="scss" scoped>
  ::v-deep .el-input-number.is-controls-right .el-input-number__increase{
    display: none;
    visibility: hidden;
    width: 10px !important;
    position: fixed;
    top:0;
  }
  ::v-deep .el-input-number.is-controls-right .el-input-number__decrease{
    display: none;
    visibility: hidden;
    position: fixed;
    top:0;
  }
  ::v-deep .el-table .cell{
    /*display: none;*/
    padding-right: 0;
    padding-left: -30px;
  }
  @media print {
    @page {
      // 纵向
      size: portrait;

      // 横向
      /*size: landscape;*/

      // 边距
      margin: 5cm 0cm 0cm 0cm;
    }
  }
  @media print {
    @page {
      margin: 0;
    }
    body {
      margin: 1cm;
    }
  }

</style>
<style media="print">
  @page {
    size: landscape;
    margin: 3mm;
  }
  @media print {
    html {
      background-color: #ffffff;
      height: auto;
      margin: 0px;
    }
    body {
      border: solid 1px #ffffff;
      /* margin: 10mm 15mm 10mm 15mm; */
    }
    #main table {
      table-layout: auto !important;
    }
    #main .el-table__header-wrapper .el-table__header {
      width: 100% !important;
      border: solid 1px #f2f2f2;
    }
    #main .el-table__body-wrapper .el-table__body {
      width: 100% !important;
    }
    #main #pagetable table {
      table-layout: fixed !important;
    }
  }
</style>
